import React from 'react';
import { Modal, Button } from 'antd';
import PropTypes from 'prop-types';
// import PageContentPreview from 'components/pageContentPreview';
import { observer, inject } from 'mobx-react';
import * as CONST from 'common/const';
import ScrollArea from 'components/scrollArea';
import PreviewSimulator from './components/previewSimulator';
import css from './index.less';
import QRCode from 'qrcode.react';

const modalTopSpace = 40;

// 弹层body区高度
const calculateModalBodyHeight = () => {
  const winHeight = window.innerHeight;
  const modalHeaderHeight = 55;
  const modalFooterHeight = 61;
  const modalBodyPadding = 24 * 2;
  const modalWrapHeight = winHeight - modalTopSpace * 2;

  return modalWrapHeight - modalBodyPadding - modalHeaderHeight - modalFooterHeight;
};
const modalBodyHeight = calculateModalBodyHeight();

// 缩放比例
const scale = modalBodyHeight / CONST.PAGE_HEIGHT;

/**
 * 预览模态框
 */
@inject('store')
@observer
export default class PreviewModal extends React.Component {

  static propTypes = {
    visible: PropTypes.bool,
    onClose: PropTypes.func,
  };

  static defaultProps = {
    visible: false,
    onClose: () => {},
  };

  onClose() {
    const { project, project: { currentPages } } = this.props.store;
    project.update('previewModalVisible', false);
    setTimeout(() => {
      // 清空预览页面和每个页面动效
      currentPages.update('previewId', null);
      currentPages.list.forEach(page => {
        page.update('motionToPlay', null);
      });
    }, 250);

  }

  renderSimulatorCell() {
    const simulatorWidth = CONST.PAGE_WIDTH * scale;
    const props = {
      simulatorWidth,
      project: this.props.store.project
    };
    return (
      <div className={css.cell}>
        <PreviewSimulator {...props}/>
      </div>
    );
  }

  renderMetaCell() {
    return (
      <div className={css.cell}>
        <div>renderMetaCell</div>
        <div>二维码：</div>
        <QRCode value="I'm QRCode." size={256} level="M" />
      </div>
    );
  }

  render() {
    const { previewModalVisible } = this.props.store.project;
    const props = {
      visible: previewModalVisible,
      title: '页面预览',
      onCancel: this.onClose.bind(this),
      width: 900,
      style: {
        top: modalTopSpace,
        paddingBottom: 0,
      },
      bodyStyle: {
        height: modalBodyHeight + 48,
      },
      footer: [
        <Button key="close" size="large" onClick={this.onClose.bind(this)}>关闭预览</Button>,
      ],
    };

    return (
      <Modal {...props}>
        <div className={css.modalRow}>
          {this.renderSimulatorCell()}
          {this.renderMetaCell()}
        </div>
      </Modal>
    );
  }
}
